<template>
  <div>
    <a-drawer
      title="电子围栏"
      width="69.9%"
      placement="right"
      :visible="visible"
      @close="onClose"
    >
      <ViewFenceMap  v-show="!selectVisible" :id="fenceId">
        <a-button v-show="!selectVisible" @click="showSelect" type="primary" size="small" >更换围栏</a-button>
        <template v-if="!fenceId" slot="no-fence">
          还未设置电子围栏,<a-button @click="showSelect" type="link">去设置</a-button>
        </template>
      </ViewFenceMap>
      <Select v-show="selectVisible" @select="(item)=> {fenceId = item.id; selectVisible = false;}" >
        <a-button v-show="selectVisible" @click="handleCancelSelect" type="primary" size="small" >取消</a-button>
      </Select>
      <div
        v-show="!selectVisible"
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          Cancel
        </a-button>
        <a-button type="primary" @click="handleSubmit">
          Submit
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import Select from './Select.vue'
import ViewFenceMap from './ViewFenceMap.vue'
export default {
  name: "Index",
  components: {
    Select,
    ViewFenceMap
  },
  data(){
    return {
      bizId: '',
      fenceId: '',
      visible: false,
      selectVisible: false,
    }
  },
  methods: {
    show(bizId, fenceId) {
      this.fenceId = fenceId;
      this.bizId = bizId;
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    showSelect(){
      this.selectVisible = true;
    },
    handleCancelSelect(){
      this.selectVisible = false;
    },
    handleSubmit(){
      this.visible = false;
      this.$emit('submit', {bizId: this.bizId, fenceId: this.fenceId});
    }
  }
}
</script>

<style scoped>
.fence-operator{
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
</style>